<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-center">
        <div style="padding: 64px 0 32px 0">
          <img src="assets/img/icon.png" style="max-width: 100px" />
        </div>

        <ion-card color="dark">
          <ion-card-header>
            <ion-button
              *ngIf="swiper?.activeIndex === 1"
              class="back-button"
              fill="clear"
              color="light"
              (click)="previous()"
            >
              <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
            </ion-button>
            <ion-card-title>
              {{ !swiper || swiper.activeIndex === 0 ? 'Select Disk' : 'Install
              Type' }}
            </ion-card-title>
            <ion-card-subtitle *ngIf="error">
              <ion-text color="danger">{{ error }}</ion-text>
            </ion-card-subtitle>
          </ion-card-header>
          <ion-card-content class="ion-margin-bottom">
            <swiper (swiper)="setSwiperInstance($event)">
              <!-- SLIDE 1 -->
              <ng-template swiperSlide>
                <ion-item
                  *ngFor="let disk of disks"
                  button
                  (click)="next(disk)"
                >
                  <ion-icon
                    slot="start"
                    name="save-outline"
                    size="large"
                    color="dark"
                  ></ion-icon>
                  <ion-label class="ion-text-wrap">
                    <h1>
                      {{ disk.vendor || 'Unknown Vendor' }} - {{ disk.model ||
                      'Unknown Model' }}
                    </h1>
                    <h2>
                      {{ disk.logicalname }} - {{ disk.capacity | convertBytes
                      }}
                    </h2>
                  </ion-label>
                </ion-item>
              </ng-template>

              <!-- SLIDE 2 -->
              <ng-template swiperSlide>
                <ng-container *ngIf="selectedDisk">
                  <!-- re-install -->
                  <ion-item
                    *ngIf="selectedDisk | guid"
                    button
                    (click)="tryInstall(false)"
                  >
                    <ion-icon
                      color="dark"
                      slot="start"
                      size="large"
                      name="medkit-outline"
                    ></ion-icon>
                    <ion-label>
                      <h1>
                        <ion-text color="success">Re-Install StartOS</ion-text>
                      </h1>
                      <h2>Will preserve existing StartOS data</h2>
                    </ion-label>
                  </ion-item>

                  <!-- fresh install -->
                  <ion-item button lines="none" (click)="tryInstall(true)">
                    <ion-icon
                      color="dark"
                      slot="start"
                      size="large"
                      name="download-outline"
                    ></ion-icon>
                    <ion-label>
                      <h1>
                        <ion-text
                          [color]="(selectedDisk | guid) ? 'danger' : 'success'"
                        >
                          {{ (selectedDisk | guid) ? 'Factory Reset' : 'Install
                          StartOS' }}
                        </ion-text>
                      </h1>
                      <h2>Will delete existing data on disk</h2>
                    </ion-label>
                  </ion-item>
                </ng-container>
              </ng-template>
            </swiper>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
